/**
 * 搜索栏组件
 * @author WeChat Mini Program Team
 * @since 2025-08-14
 */

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 占位符文本
    placeholder: {
      type: String,
      value: '请输入搜索关键词'
    },
    
    // 输入值
    value: {
      type: String,
      value: ''
    },
    
    // 是否自动聚焦
    focus: {
      type: Boolean,
      value: false
    },
    
    // 是否显示取消按钮
    showCancel: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    focused: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 输入框输入事件
     */
    onInput(e) {
      const value = e.detail.value
      this.setData({ value })
      
      // 触发输入事件
      this.triggerEvent('input', { value })
    },

    /**
     * 输入框确认事件
     */
    onConfirm(e) {
      const value = e.detail.value
      this.onSearch(value)
    },

    /**
     * 输入框获得焦点
     */
    onFocus(e) {
      this.setData({ focused: true })
      this.triggerEvent('focus', e.detail)
    },

    /**
     * 输入框失去焦点
     */
    onBlur(e) {
      this.setData({ focused: false })
      this.triggerEvent('blur', e.detail)
    },

    /**
     * 清除输入
     */
    onClear() {
      this.setData({ value: '' })
      this.triggerEvent('clear')
      this.triggerEvent('input', { value: '' })
    },

    /**
     * 搜索事件
     */
    onSearch(value) {
      const searchValue = value || this.data.value
      if (!searchValue.trim()) {
        wx.showToast({
          title: '请输入搜索关键词',
          icon: 'none'
        })
        return
      }
      
      this.triggerEvent('search', { 
        value: searchValue.trim() 
      })
    }
  }
})
